<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <div th:replace="header :: commonheader"></div>
</head>
<body>
<div th:replace="header :: commonnav"></div>

<style>
    .accent-line {
        background-color: #3fa9f5;
        width: 4px;
        height: 25px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .box-wrapper h3 {
        margin-bottom: 1.4rem;
        font-weight: 700;
        font-size: 1rem;
        color: #000;
        line-height: 19px;
        margin-left: 20px;
        margin-top: -25px;

    }
    .image-wall {
        height: 600px;
        overflow-y: scroll;
    }

    .image-wall img {
        width: 18%; /* 设置图片宽度为所占行宽度的百分比 */
        margin: 0 10px;
        height: 134px;
        cursor: pointer;
    }
</style>

<div id="videoDom" class="main-page-box" v-cloak>
    <div id="bannerModule">
        <div class="homeSlide">
            <ul class="slides">
                <li><img th:src="${ztSet.banner}?${ztSet.banner}:'https://file.xatianzhou.com/set/images/1703295970000mjk7j9q9zxg.jpg'"></li>
            </ul>
        </div>
        <!--    <div class="bm_tc"></div>-->
    </div>

<!--    <div class="yunu-sou" style="display: block">-->
<!--        <div class="container clearfix">-->
<!--            <div class="hot"> <strong>本页关键词：</strong>-->

<!--                陕西西安矿石化验,选矿实验,矿山设计,矿山承包,选矿厂承包,岩矿鉴定,矿权交易-->

<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="aboutcontain3">
        <div class="abouttop">

            <div class="abouttopnall">
                <div class="abouttopnwai">
                    <div class="abouttopn" th:text="${ztSet.name}"></div>
                </div>
                <div class="mianbao">
                    <a href="/">首页</a>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="aboutcontain3" v-if="videocate.length > 0" >
            <div class="abouttop abouttop3" style="margin-top:20px;position: relative;">
                <div class="column_list" style="margin-top: 30px;" :loading="listVideoLoading">
                    <div class="box-wrapper">
                        <div class="accent-line"></div>
                        <div>
                            <h3 class="mb-0 text-uppercase">视频</h3>
                        </div>
                    </div>

<!--                    <dl class="dl_temp dl_temp_w387" th:if="${videotop != null}">-->
<!--                        <dd class="d_img" style="height:293px;">-->
<!--                            <a target="_blank" th:href="${'/video2/'+videotop.id+'.html'}">-->
<!--                                <img style="border-radius: 0px;" th:src="${videotop.thumb+'?x-oss-process=image/resize,m_fill,h_400,w_400'}" th:alt="${videotop.title}"> </a>-->
<!--                        </dd>-->
<!--                        <dt class="d_tit daxiao">-->
<!--                            <a target="_blank" th:href="${'/video2/'+videotop.id+'.html'}" th:text="${videotop.title}"></a>-->
<!--                        </dt>-->
<!--                    </dl>-->

                    <el-tabs type="border-card" @tab-click="videoCateChange">
                        <el-tab-pane  v-for="(cate,cateindex) in videocate" :label="cate.name">
                            <div>
                                <dl class="dl_temp" style="width: 265px;" v-for="(item,index) in videoList" :key="'video_'+index">
                                    <div style="width: 100%;text-align: center;">
                                        <dd class="d_img" style="margin-left: 0px;">
                                            <a target="_blank" :href="'/video2/'+item.id+'.html'"><img style="border-radius: 0px;" :src="item.thumb+'?x-oss-process=image/resize,m_fill,h_117,w_210'" :alt="item.title" width="210" height="117"></a>
                                        </dd>
                                    </div>

                                    <dt class="d_tit"><a target="_blank" :href="'/video2/'+item.id+'.html'">{% item.title %}</a></dt>
                                </dl>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>

        </div>
        <div style="width: 50%;margin: 0 auto;" v-if="videototal > 0">
            <el-pagination
                    style="text-align: center;"
                    @current-change="handleVideoCurrentChange"
                    :page-size="v_page_size"
                    :current-page="videopage"
                    layout="prev, pager, next, jumper"
                    :total="videototal">
            </el-pagination>
        </div>

    </div>
    <div class="aboutcontain3" th:unless="${#arrays.isEmpty(images)}">
        <div class="abouttop abouttop3" style="margin-top:20px;position: relative;">
            <div class="column_list" style="margin-top: 30px;">
                <div class="box-wrapper">
                    <div class="accent-line"></div>
                    <div>
                        <h3 class="mb-0 text-uppercase">照片墙</h3>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <div style="margin-top: 10px;" v-if="images.length > 0 ">
        <div class="aboutcontain3">
            <div class="abouttop abouttop3" style="position: relative;">
                <el-tabs type="border-card">
                    <el-tab-pane v-for="(imgda,imgindex) in images" :label="imgda.name" >
                        <div class="image-wall">
                            <div class="row">
                                <img v-for="(img,iindex) in imgda.imageUrls" :src="img+'?x-oss-process=image/resize,m_fill,w_355,h_234'" @click="showImgVue(iindex,imgindex);" alt="Image 1">
                            </div>


                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>


    <div>
        <div class="aboutcontain3" v-if="articleList.length > 0">
            <div class="abouttop abouttop3" style="margin-top:20px;position: relative;">
                <div class="column_list" style="margin-top: 30px;" :loading="listArticleLoading">
                    <div class="box-wrapper">
                        <div class="accent-line"></div>
                        <div>
                            <h3 class="mb-0 text-uppercase">资讯</h3>
                        </div>
                    </div>
                    <dl class="dl_temp" v-for="(item,index) in articleList" :key="'article_'+index">
                        <div style="width: 100%;text-align: center;">
                            <dd class="d_img"  style="margin-left: 0px;">
                                <a target="_blank" :href="'/new2/'+item.id+'.html'"><img style="border-radius: 0px;" :src="item.thumb+'?x-oss-process=image/resize,m_fill,h_117,w_210'" :alt="item.title" width="210" height="117"></a>
                            </dd>
                        </div>
                        <dt class="d_tit"><a target="_blank" :href="'/new2/'+item.id+'.html'">{% item.title %}</a></dt>
                    </dl>
                </div>
            </div>

        </div>
        <div style="width: 50%;margin: 0 auto;" v-if="articletotal > 0">

            <el-pagination
                    style="text-align: center;"
                    @current-change="handleArticleCurrentChange"
                    :page-size="page_size"
                    layout="prev, pager, next, jumper"
                    :total="articletotal">
            </el-pagination>
        </div>
    </div>



</div>
<script>
    window.onload = function() {

//         // 获取图片墙和所有图片元素
//         var imageWall = document.getElementById('image-wall');
//         var images = document.querySelectorAll('#image-wall img');
//
// // 添加滚动事件监听器
//         imageWall.addEventListener('scroll', function() {
//             // 遍历所有图片元素
//             for (var i = 8; i < images.length; i++) {
//
//                 var image = images[i];
//                 // 如果图片还没有加载
//                 if (image.getAttribute('src') == 'https://file.xatianzhou.com/pic.png') {
//                     // 计算图片距离顶部的距离
//                     var imageTop = image.offsetTop - imageWall.offsetTop;
//                     // 如果图片已经滚动到可见区域
//                     if (imageTop < imageWall.clientHeight + imageWall.scrollTop) {
//                         // 加载图片
//                         image.setAttribute('src', image.getAttribute('data-src'));
//                     }
//                 }
//             }
//         });
//
//         imageWall.scrollBy({
//             top: 10, // 滚动的垂直距离
//             behavior: 'smooth' // 平滑滚动效果
//         });
    };


</script>
<script th:inline="javascript">
    /* 使用Thymeleaf表达式获取paramid的值并存储为变量 */
    var setid = [[${setid}]];
    var images = [[${images}]];
    var videocate = [[${videocate}]];
</script>
<script>
    new Vue({
        el: '#videoDom',
        data: {
            videocate:videocate,
            currvideoCate:videocate.length > 0?videocate[0].id:0,
            images:images,
            count: 0,
            setid:setid,
            videopage:1,
            listVideoLoading:false,
            videoList:[],
            v_page_size:8,
            page_size: 20,
            videototal:0,
            articlepage:1,
            articletotal:0,
            articleList:[]
        },
        created(){
            this.getVideoData()
            this.getArticleData()
        },
        methods: {
            videoCateChange(e){
                this.videopage = 1;
                this.currvideoCate = videocate[e.paneName].id;
                this.getVideoData();
            },
            load () {
                this.count += 2
            },
            handleVideoCurrentChange(e){
                this.videopage = e
                this.getVideoData()
            },
            handleArticleCurrentChange(e){
                this.articletotal = e
                this.getArticleData()
            },
            getVideoData(){
                let that = this
                that.listVideoLoading = true
                $.ajax({
                    type: "GET",
                    dataType:"json",
                    data:{page:that.videopage,page_size:that.v_page_size,setid:this.setid,cateid:this.currvideoCate},
                    async:true,
                    url:'/get_ztvideo_page_list',
                    success: function (res) {
                        that.listVideoLoading = false
                        let da = res.data
                        that.videototal = da.total
                        that.videoList = da.data
                    },
                    error:function (err) {
                        console.log("这是请求失败的");
                    }
                });
            },
            getArticleData(){
                let that = this
                that.listArticleLoading = true
                $.ajax({
                    type: "GET",
                    dataType:"json",
                    data:{page:that.articlepage,page_size:that.page_size,setid:this.setid},
                    async:true,
                    url:'/get_article_page_list',
                    success: function (res) {
                        that.listArticleLoading = false
                        let da = res.data
                        that.articletotal = da.total
                        that.articleList = da.data
                    },
                    error:function (err) {
                        console.log("这是请求失败的");
                    }
                });
            },
            showImgVue(ind,imgindex){
                showImg(ind,imgindex)
            }
        },
        delimiters: ['{%', '%}'],
    })

</script>

<script>
    /**
     *
     *
     * @param {any} currentIndex 当前图片的索引
     * @param {any} srcList 图片的src路径
     */
    function showImg(current,imgindex) {
        var srcList = images[imgindex].imageUrls
        var currentIndex = current

        //遮罩层
        var overlayStyle = 'position: absolute;top: 0%;left: 0%;width: 100%; height: ' + $('body').height() + 'px;background-color: #3B3B3B;z-index: 1200;-moz-opacity: 0.8;opacity: .80; '
        var overlay = '<div class="overlay" style="' + overlayStyle + '"></div>'
        //1.先将遮罩层加到body
        $('body').append(overlay)

        //图片css
        var imgContainerMaxWidth = 1000 //图片允许的最大宽度（单位：px）
        var imgContainerMaxHeight = 750 //图片允许的最大高度（单位：px）
        var imgStyle = 'max-height:' + imgContainerMaxHeight + 'px;max-width:' + imgContainerMaxWidth
            + 'px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);'
            + 'background-color:white;z-index: 1210;border-bottom:1px solid #000;border-radius: 5px;'
        var img = '<div class="pre-img" style="' + imgStyle + '">'
            + '<div class="pre-close" style="height:30px;">'
            + '<div style="cursor:pointer;margin-left:30px;width:30px;height:100%;border-radius: 50%;background-color:#E6E6FA;"><a href="javascript:;" style="opacity: 0.3;"  class="close"></a></div></div>'
            + '<img class="detail-img" src="' + srcList[currentIndex] + '?x-oss-process=image/quality,q_60" style="height:' + 'auto' + ';width:' + 'auto' + '" />'
            + '</div>'
        //2.再将整个图片容器加到body
        $('body').append(img)

        //关闭按钮css（由于伪元素不可用js设置，所以在head创建一个style用,关闭窗口时移除）
        var closeStyle =
            ' .close{opacity: 0.6;}'
            + ' .close:hover{opacity: 1;}'
            + ' .close:before, .close:after {float: right;position: relative;right: 15px;top: 5px;content: "  ";height: 20px;width: 1px;background-color: #333;}'
            + '.close:before{transform: rotate(45deg);}'
            + '.close:after{ transform: rotate(-45deg); }'
        //3.将关闭按钮的样式加到body
        $('head').append($('<style id="closeSytle">').text(closeStyle))

        //左边（前一张）按钮
        var preLeft = '<div class="pre-left" style="cursor:pointer;z-index: 1210;border-radius: 50%; background-color: #E6E6FA; top: 50%; position: fixed; width: 50px; height: 50px ">'
        '</div>'
        //4.将左边按钮加到body
        $('body').append(preLeft)
        $($('.pre-left')[0]).append('<a style="transform: translate3d(0, -50%, 0) rotate(-135deg);position: absolute;top:52%;left:35%;width: 1.5rem;height: 1.5rem;border-top: 0.4rem solid black;border-right: 0.4rem solid black;box-shadow: 0 0 0 lightgray;transition: all 200ms ease;z-index: 1210;"></a>')

        //右边(下一张)按钮
        var preRight = '<div class="pre-right" style="right:0;cursor:pointer;z-index: 1210;border-radius: 50%; background-color: #E6E6FA; top: 50%; position: fixed; width: 50px; height: 50px ">'
        '</div>'
        //5.将右边按钮加到body
        $('body').append(preRight)
        $($('.pre-right')[0]).append('<a style="transform: translate3d(0, -50%, 0) rotate(45deg);position: absolute;top:54%;width: 1.5rem;height: 1.5rem;border-top: 0.4rem solid black;border-right: 0.4rem solid black;box-shadow: 0 0 0 lightgray;transition: all 200ms ease;z-index: 1210;"></a>')

        //图片加载完成后才获取宽和高，不然同步执行可能获取不到，同时此后每当图片变化，需要重新加载就会
        //执行到这里
        $($('.pre-img')[0]).find('img')[0].addEventListener("load", function () {
            //图片原始宽高
            var imgHeight = this.naturalHeight
            var imgWidth = this.naturalWidth

            //图片经过计算后的宽高
            var newHeight
            var newWidth

            if (imgHeight < imgContainerMaxHeight && imgWidth < imgContainerMaxWidth) { //宽和高都没超过最大值
                newHeight = imgHeight
                newWidth = imgWidth
            } else if (imgHeight < imgContainerMaxHeight && imgWidth > imgContainerMaxWidth) {  //宽 超过最大值
                var rWidth = imgWidth / imgContainerMaxWidth
                newHeight = imgHeight / rWidth
                newWidth = imgContainerMaxWidth
            } else if (imgHeight > imgContainerMaxHeight && imgWidth < imgContainerMaxWidth) {  //高 超过最大值
                var rHeight = imgHeight / imgContainerMaxHeight
                newHeight = imgContainerMaxHeight
                newWidth = imgWidth / rHeight
            } else if (imgHeight > imgContainerMaxHeight && imgWidth > imgContainerMaxWidth) { //宽和高都超过最大值
                var rHeight = imgHeight / imgContainerMaxHeight
                var rWidth = imgWidth / imgContainerMaxWidth
                //rHeight 表示原图高度需要缩小 rHeight 倍才能到达允许的最大高度
                //rWidth  表示原图宽度需要缩小 rWidth  倍才能到达允许的最大宽度
                //由于这时 宽和高是要同时缩小的，所以假设宽和高要同时缩小n倍才能使缩小后宽和高都不超过
                //最大值，那么 n必然取 rHeight 和 rWidth 之中的最大值
                if (rWidth > rHeight) {
                    newWidth = imgContainerMaxWidth
                    newHeight = imgHeight / rWidth
                } else {
                    newHeight = imgContainerMaxHeight
                    newWidth = imgWidth / rHeight
                }
            }

            //图片设置经过计算后的宽和高
            $($($('.pre-img')[0]).find('img')[0]).css({ 'height': newHeight, 'width': newWidth })

            //整个容器（div class="pre-img"）的高度是=关闭按钮的高度+图片的高度，
            //所以图片高度变化时，容器的高度也要变化
            $($('.pre-img')[0]).css({ 'height': newHeight + $($($('.pre-img')[0]).find('pre-close')[0]).height(), 'width': newWidth })

            //关闭按钮的位置
            $($('.pre-close')[0]).find('div').css({ 'margin-left': (newWidth - $($('.pre-close')[0]).find('div').width()) + 'px' })
        })

        //关闭按钮css
        $($('.pre-close')[0]).find('div').hover(function () {
            $($($('.pre-close')[0]).find('a')[0]).css('opacity', 1)
        })
        $($('.pre-close')[0]).find('div').mouseleave(function () {
            $($($('.pre-close')[0]).find('a')[0]).css('opacity', 0.6)
        })

        //关闭按钮点击 => 关闭
        $($('.pre-close')[0]).find('div').click(function () {
            close()
        })

        //遮罩层点击 => 关闭
        $('.overlay').click(function () {
            close()
        })

        //下一页点击
        $($('.pre-right')[0]).click(function () {
            next()
        })

        //上一页点击
        $($('.pre-left')[0]).click(function () {
            pre()
        })

        /**
         * 关闭
         * */
        function close() {
            $('.overlay').remove()
            $('.pre-img').remove()
            $('#closeSytle').remove()
            $($('.pre-left')[0]).remove()
            $($('.pre-right')[0]).remove()
        }

        /**
         * 前一张
         * */
        function pre() {
            if (currentIndex > 0) {
                if (currentIndex == 1){
                    $('.pre-left').css('display','none')
                }
                currentIndex--
            }
            $($('.detail-img')[0]).attr('src', srcList[currentIndex]+'?x-oss-process=image/quality,q_60')
        }

        /**
         * 下一张
         * */
        function next() {
            $($('.pre-right')[0]).css('dispaly','block')
            if (currentIndex < srcList.length - 1) {
                if (currentIndex == srcList.length - 2){
                    $('.pre-right').css('display','none')
                }
                currentIndex++
            }
            $($('.detail-img')[0]).attr('src', srcList[currentIndex]+'?x-oss-process=image/quality,q_60')
        }
    }

</script>
<div th:replace="footer :: commonfooter"></div>
</body>
</html>